<template>
  <div class="container">
    <div>
      <el-row :gutter="12">
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="车牌号：">
              <el-select v-model="dyclyhlc.cph" placeholder="请选择">
                <el-option
                  v-for="(item, index) in dyclyhlc.cphList"
                  :key="index"
                  :label="item.LICENSE_PLATE"
                  :value="item.VID"
                ></el-option>
              </el-select>
            </el-form-item>
            <!-- <el-form-item label="时间间隔：">
              <el-select v-model="form.timeTypeValue" placeholder="请选择">
                <el-option
                  v-for="item in form.timeTypeList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-form-item> -->
          </el-form>
        </el-col>
        <!-- <el-col :span="6" v-if="form.timeTypeValue != '0'">
          <el-form ref="form" :model="form">
            <el-form-item :label="form.TITLETIME">
              <el-select v-model="form.timeValue" placeholder>
                <el-option
                  v-for="(item,index) in form.timeList"
                  :key="index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
          </el-form>
        </el-col> -->
        <el-col :span="6">
          <el-form ref="form" :model="form">
            <el-form-item label="查询日期：">
              <el-date-picker
                v-model="form.startDate"
                type="date"
                placeholder="选择查询日期"
                value-format="yyyy-MM-dd"
              ></el-date-picker>
            </el-form-item>
            <!-- <el-form-item label="结束日期：">
              <el-date-picker
                v-model="form.endDate"
                type="datetime"
                placeholder="选择结束日期"
                value-format="yyyy-MM-dd HH:mm:ss"
              ></el-date-picker>
            </el-form-item> -->
          </el-form>
        </el-col>
        <el-col :span="6">
          <el-form ref="form" :model="form" style="float: left">
            <el-button size="mini" type="primary" @click="handleSubmit"
              >查 询</el-button
            >
            <!-- <el-button size="mini" type="success" @click="exportExcel">导 出</el-button> -->
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!-- 统计列表 -->
    <div style="width: 100%; height: 33.854vw" id="dyclyhLinediv"></div>
    <!-- <el-table
      :data="dyclyhlc.tableData"
      style="width: 100%"
      border
      highlight-current-row
      height="477"
    >
      <el-table-column
        v-for="(item,index) in dyclyhlc.tableHead"
        :key="index"
        :label="item.label"
        :property="item.property"
        align="center"
      >
        <template slot-scope="scope">{{scope.row[scope.column.property]}}</template>
      </el-table-column>
    </el-table>
    <div class="pagination">
      <el-pagination
        background
        layout="total, sizes, prev, pager, next, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="tableData.length"
        @size-change="handleSizeChange"
        @current-change="handlePageChange"
      ></el-pagination>
    </div> -->
  </div>
</template>
<script>
import '@/assets/css/common.css'

import export2Excel from '@/utils/exportExcel/index.js'
import { formatDate } from '@/common/js/date.js'
import * as echarts from 'echarts';
export default {
  data () {

    return {
      currentPage: 1, //初始页
      pageSize: 10,    //    每页的数据
      //单一车辆费用统计
      dyclyhlc: {
        show: false,//是否显示
        cphList: [],//车牌号列表
        cph: '',//车牌号
        startDate: '',//开始日期
        endDate: '',//结束日期
        year: '',//年
        month: '',//月
        season: '',//季
        tableData: [],//列表数据
        tHeader: [],
        filterVal: [],
        excelName: []//导出excel名称
      },
      //单一车辆费用统计查询
      dyclyhlcSearch: {
        carNo: '',
        StartDate: '',
        endDate: '',
        season: '',
        month: '',
        year: '',
        type: ''
      },
      form: {
        carList: [],
        carValue: '',
        timeTypeList: [{ label: '10分钟', value: '10' }, { label: '30分钟', value: '30' }, { label: '1小时', value: '60' }],
        timeTypeValue: '10',
        TITLETIME: '月份：',
        timeList: [],
        timeValue: '',
        startDate: formatDate(new Date(new Date() - 3600 * 1000 * 24 * 1), 'yyyy-MM-dd'),
        endDate: formatDate(new Date(new Date() - 3600 * 1000 * 24), 'yyyy-MM-dd hh:mm:ss'),
        yearList: ['2018年', '2019年', '2020年', '2021年'],
        seasonList: ['第一季度', '第二季度', '第三季度', '第四季度'],
        monthList: ['1月',
          '2月',
          '3月',
          '4月',
          '5月',
          '6月',
          '7月',
          '8月',
          '9月',
          '10月',
          '11月',
          '12月'],
        radioData: '日',
        valueDay: '',
        valueMonth: '',

      },
      dyclyhlcSearch: {},
      tableHead: [],
      tableData: []
    }
  },
  created () {

    this.form.timeList = this.form.monthList
  },
  mounted () {
    this.getLisencePlateList()
  },
  methods: {
    //获取车牌列表
    async getLisencePlateList () {
      var url = '/RubbishVehicle/GetRubbishWeightVehicleAll?ClientNo=' + localStorage.getItem('CLIENT_NO')
      const { data } = await this.$Http.get(url)
      this.dyclyhlc.cphList = data
    },
    // 点击查询，判断是否选择车牌号
    handleSubmit () {
      if (this.dyclyhlc.cph == '') {
        this.$message.warning(`请选择车牌号`);
      } else {
        this.dyclyhLineSearchClick()
      }
    },
    async dyclyhLineSearchClick () {
      const loading = this.$loading({
        lock: true,
        text: 'Loading',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.7)'
      });
      let url = 'RubbishVehicle/GetVehicleWeightline?BEGINTIME=' + this.form.startDate + '&ENDTIME=&Z=&VID=' + this.dyclyhlc.cph
      const { data } = await this.$Http.get(url)
      loading.close();
      if (data.length == 0) {
        this.$message.warning(`没有称重数据`);
      }
      var time = []
      var weight = []
      data.forEach(element => {
        time.push(element.称重时间)
        weight.push(element.称重量)
      });
      // 绘制图表
      var myChart = echarts.init(document.getElementById('dyclyhLinediv'));
      myChart.setOption(
        {
          xAxis: {
            type: 'category',
            data: time
          },
          yAxis: {
            type: 'value'
          },
          tooltip: {
            trigger: 'axis'
          },
          series: [{
            type: 'line',
            // type: 'scatter', 散点
            // symbolSize: 15,
            data: weight,
            // label: {
            //   show: true,
            //   color: '#0f59a4',
            //   position: 'top'
            // },
            // markPoint: {
            //   data: [
            //     { type: 'max', name: 'Max' },
            //     { type: 'min', name: 'Min' }
            //   ]
            // },
          }]
        });
    },
    // 导出Excel
    // exportExcel () {
    //   const excelName = this.dyclyhlc.cph + '油耗里程统计'
    //   const tHeader = ['车牌号', '时间', '耗油量', '加油量', '加油次数', '行驶里程']
    //   const filterVal = ['车牌号', '时间', '耗油量', '加油量', '加油次数', '行驶里程']
    //   export2Excel(tHeader, filterVal, this.dyclyhlc.tableData, excelName)
    // },
    //详情
    handleEdit (index, row) {
      //   this.idx = index;
      //   this.form = row;
      //   this.editVisible = true;
    },
    // 分页导航
    handlePageChange (currentPage) {
      this.currentPage = currentPage;
      // console.log(this.currentPage)
      // this.$set(this.query, 'pageIndex', val);
      // this.getData();
    },
    handleSizeChange (size) {
      this.pageSize = size;
      console.log(this.pageSize)
    }
  }
}
</script>
<style>
.content {
  overflow-y: scroll;
}
.el-col-6 {
  width: 350px;
  min-height: 50px;
}
.el-table th {
  height: 40px;
}
.el-form-item label {
  width: 80px;
}
</style>